<template>
  <div class="page">
    <van-nav-bar title="申请提现" left-arrow @click-left="$router.go(-1)"/>
    <div class="flex-row row-padding">
      <span class="font-gray">提现到</span>
      <div class="flex-row" style="height: 1.33rem;">
        <img :src="'./img/wx.png'" style="width: 0.56rem; height: 0.45rem;"/>
        <span style="font-weight: bold; margin-left: 0.27rem;">微信钱包</span>
      </div>
    </div>
    <div class="flex-col row-padding">
      <div class="font-gray" style="margin: 0.25rem 0;">提现金额:</div>
      <div class="flex-row" style="border-bottom: 1px solid #ededed; font-size: 18px; font-weight: bold; height: 1.05rem;">
        <span>¥</span>
        <input v-model.trim="money" type="text" style="border: none; line-height: 1rem; flex: 1; margin-left: 0.4rem;" placeholder="请输入提现金额">
      </div>
      <div v-if="$store.getters.ifShoper" class="font-gray" style="margin: 0.25rem 0; font-size: 12px;">
        <div>* 每次提现5分钟内到账，请注意查收</div>
        <div>* 微信打款会收取您2.5%的费用，其中包含税费及提现手续费。</div>
      </div>
      <div v-else class="font-gray" style="margin: 0.25rem 0; font-size: 12px;">
        <div>* 提现金额限100～5000内，100的整数倍</div>
        <div>* 微信打款会收取您1%的费用，其中包含税费及提现手续费。</div>
      </div>
    </div>

    <div class="flex-row row-padding" style="height: 1.33rem;">
      <span>验证码</span>
      <input v-model.trim="sms.code" type="text" style="border: none; line-height: 1rem; flex: 1; margin-left: 0.4rem;" placeholder="请输入提现金额">
      <span class="font-blue" style="margin-left: 0.27rem;" @click="sms.send">{{ sms.string }}</span>
    </div>

    <div style="margin: 1rem 16px 16px;">
      <van-button block type="info" :loading="btnLoading" @click="submit()">提交</van-button>
    </div>
    <div v-if="$store.getters.ifAgent" class="font-gray" style="text-align: center; font-size: 12px;">提现申请通过后，1～3天到账</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnLoading: false,
      sms: {
        code: '',
        loading: false,
        string: '获取验证码',
        timer: null,
        send: () => {
          if (this.sms.loading) return ;
          if (this.sms.string != '获取验证码') return ;
          let reg = this.$check('请输入正确的手机号码', 'phone');
          let phoneNumber = this.$store.state.userInfo.phone;
          if (!reg.pattern.test(phoneNumber)) return this.$toast(reg.message);
          this.sms.loading = true; 
          this.$axios.get('/api/SmsController/sendverifyCode', { 
            phoneNumber
          }).then(res => {      
            this.$toast('短信验证码发送成功！')
            this.sms.loading = false;
            this.sms.string = 60;
            this.sms.timer = setInterval(() => {
              this.sms.string--;
              if (this.sms.string == 0) {
                this.sms.string = '发送验证码';
                clearInterval(this.sms.timer);
                this.sms.timer = null;
              }
            }, 1000);
          }).catch(err => {
            this.sms.loading = false;
          })
        }
      },
      money: ''
    };
  },
  methods: {
    submit() {
      if (this.btnLoading) return ;

      let phoneNumber = this.$store.state.userInfo.phone;
      let reg = this.$check('请输入正确的手机号码', 'phone');
      if (!reg.pattern.test(phoneNumber)) return this.$toast(reg.message);

      if (this.$store.getters.ifShoper) {
        let reg = /^[1-9][0-9]*[0]+$/;
        if (!reg.test(this.money)) return this.$toast('提现金额要大于等于10，小于等于2000，10的整数倍！');
      } else {
        let reg=/^(([1-4][0-9]00)|([1-9]00)|([1-5]000))$/;
        if (!reg.test(this.money)) return this.$toast('提现金额要大于等于100，小于等于5000，100的整数倍！');
      }

      if (!this.sms.code) { this.$toast('请填写手机验证码！'); return ; }

      this.btnLoading = true;
      this.$axios.get('/api/SmsController/checkSmsCode', { 
        phoneNumber, code: this.sms.code 
      }).then(() => {
        this.$axios.post('/api/WithdrawController/addWithdraw', { 
          operatingWay: 0, userId: this.$store.state.userInfo.userId, withdrawalAmount: this.money, 
          withdrawalWay: 2, wxOpenid: this.$store.state.userInfo.wxOpenId 
        }).then(() => {
          this.$dialog.alert({ 
            title: '提示', 
            message: '提现金额审核通过后会入账到当前微信余额中，请确认。', 
            messageAlign: 'left' 
          }).then(() => {
            this.$router.go(-1);
          });
        }).catch(() => {      
          this.btnLoading = false;
        })
      }).catch(() => {      
        this.btnLoading = false;
        this.$toast('验证码填写有误！');
      })
    }
  },
  mounted() { 
  },
  beforeDestroy() {
    if (this.sms.timer) clearInterval(this.sms.timer);
  }
};
</script>

<style lang="less">
.row-padding {
  box-sizing: border-box; 
  padding: 0 0.4rem; 
  background: #fff; 
  margin-top: 0.4rem;
  font-size: 14px;;
}
</style>